import "./Header.css";
import React from "react";
// react中的路由穿透
import { withRouter } from "react-router";
import { GlobalOutlined } from "@ant-design/icons";
import { Layout, Typography, Input, Menu, Button, Dropdown } from "antd";
const logo = "https://ftp.bmp.ovh/imgs/2021/06/7995dff8ae6dedb9.png";
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      flag: 1,
    };
    var username = sessionStorage.getItem("username");
    this.state.username = username;
    console.log("headerconstructor", this.state.username);
  }

  a = (e) => {
    console.log("中文切换");
    // 往sessionStrage里面保存一份
    this.setState(
      {
        flag: 1,
      },
      () => {
        console.log(this.state.flag);
      }
    );
  };

  b = (e) => {
    console.log("english change");
    // 往sessionStrage里面保存一份
    this.setState(
      {
        flag: 2,
      },
      () => {
        console.log(this.state.flag);
      }
    );
  };
  backout = () => {
    console.log("backout");
    sessionStorage.clear();

    this.props.history.push("Login");
    window.location.reload();
  };

  render() {
    return (
      // 切换后全局中英文 网站国际化
      this.state.flag === 1 ? (
        <div className="App">
          <div className="app-header">
            {/* top-header 第一阶层的header */}

            <div className="top-header">
              <div className="innner">
                <Typography.Text>让旅行更幸福</Typography.Text>
                <Dropdown.Button
                  style={{ marginLeft: 15 }}
                  icon={<GlobalOutlined />}
                  overlay={
                    <Menu>
                      <Menu.Item key={1} onClick={this.a}>
                        中文
                      </Menu.Item>
                      <Menu.Item key={2} onClick={this.b}>
                        english
                      </Menu.Item>
                    </Menu>
                  }
                >
                  语言
                </Dropdown.Button>

                {!this.state.username ? (
                  <Button.Group className="button-group">
                    <Button onClick={() => this.props.history.push("Register")}>
                      注册
                    </Button>
                    <Button onClick={() => this.props.history.push("login")}>
                      登录
                    </Button>
                  </Button.Group>
                ) : (
                  <Button.Group className="button-group">
                    <Button>{this.state.username}</Button>

                    <Button type="danger" onClick={this.backout}>
                      退出
                    </Button>
                  </Button.Group>
                )}
              </div>
            </div>

            {/* 第二阶层的 header */}
            <Layout.Header className="main-header">
              <img src={logo} className="App-logo" />
              <Typography.Title level={3} className="title">
                环球旅行
              </Typography.Title>
              <Input.Search
                placeholder={"请输入 旅游目的地 关键字"}
                className="search-input"
              ></Input.Search>
            </Layout.Header>

            {/* 场边导航菜单栏 */}
            <Menu mode={"horizontal"} className="main-menu">
              <Menu.Item key={1}>旅游首页</Menu.Item>
              <Menu.Item key={2}>周末游</Menu.Item>
              <Menu.Item key={3}>跟团游</Menu.Item>
              <Menu.Item key="4"> 自由行 </Menu.Item>
              <Menu.Item key="5"> 私家团 </Menu.Item>
              <Menu.Item key="6"> 邮轮 </Menu.Item>
              <Menu.Item key="7"> 酒店+景点 </Menu.Item>
              <Menu.Item key="8"> 当地玩乐 </Menu.Item>
              <Menu.Item key="9"> 主题游 </Menu.Item>
              <Menu.Item key="10"> 定制游 </Menu.Item>
              <Menu.Item key="11"> 游学 </Menu.Item>
              <Menu.Item key="12"> 签证 </Menu.Item>
              <Menu.Item key="13"> 企业游 </Menu.Item>
              <Menu.Item key="14"> 高端游 </Menu.Item>
              <Menu.Item key="15"> 爱玩户外 </Menu.Item>
              <Menu.Item key="16"> 保险 </Menu.Item>
            </Menu>
          </div>

          {/* 底部组件的开发  */}
        </div>
      ) : (
        <div className="App">
          <div className="app-header">
            {/* top-header 第一阶层的header */}

            <div className="top-header">
              <div className="innner">
                <Typography.Text>Make travel happier</Typography.Text>
                <Dropdown.Button
                  style={{ marginLeft: 15 }}
                  icon={<GlobalOutlined />}
                  overlay={
                    <Menu>
                      <Menu.Item key={1} onClick={this.a}>
                        chinese
                      </Menu.Item>
                      <Menu.Item key={2} onClick={this.b}>
                        english
                      </Menu.Item>
                    </Menu>
                  }
                >
                  language
                </Dropdown.Button>

                {/* 注册登录 */}
                <Button.Group className="button-group">
                  <Button>register</Button>
                  <Button>login</Button>
                </Button.Group>
              </div>
            </div>

            {/* 第二阶层的 header */}
            <Layout.Header className="main-header">
              <img src={logo} className="App-logo" />
              <Typography.Title level={3} className="title">
                world travel
              </Typography.Title>
              <Input.Search
                placeholder={"Please enter the keyword of tourist destination"}
                className="search-input"
              ></Input.Search>
            </Layout.Header>

            {/* 场边导航菜单栏 */}
            <Menu mode={"horizontal"} className="main-menu">
              <Menu.Item key={1}>Tourism Homepage</Menu.Item>
              <Menu.Item key={2}>Weekend tour</Menu.Item>
              <Menu.Item key={3}>Group tour</Menu.Item>
              <Menu.Item key="4"> Group tour </Menu.Item>
              <Menu.Item key="5"> Private group </Menu.Item>
              <Menu.Item key="6"> liner </Menu.Item>
              <Menu.Item key="7">liner </Menu.Item>
              <Menu.Item key="8"> liner </Menu.Item>
              <Menu.Item key="9"> liner </Menu.Item>
              <Menu.Item key="10"> liner </Menu.Item>
              <Menu.Item key="11"> liner </Menu.Item>
              <Menu.Item key="12"> liner </Menu.Item>
              <Menu.Item key="13"> liner </Menu.Item>
              <Menu.Item key="14"> liner </Menu.Item>
              <Menu.Item key="15"> liner </Menu.Item>
              <Menu.Item key="16"> liner </Menu.Item>
            </Menu>
          </div>
          {/* 底部组件的开发  */}
        </div>
      )
    );
  }
}

export default withRouter(App);
